<template>
  <div class="updateCourseDesign">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改课程设计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" :model="form" label-width="100px" class="content fixed-form" :rules="rules">

      <el-form-item label="课设名称" prop="courseDesignName">
        <el-input v-model="form.courseDesignName" placeholder="请输入课设名称"></el-input>
      </el-form-item>
      <el-form-item label="课程名称" prop="trainingCourseID">
        <el-cascader
          v-model="selectedcourseInfo"
          :options="courseInfo"
          :show-all-levels="false"
          placeholder="请选择课程名称"
          @change="courseInfoChange"
          class="max-width">
        </el-cascader>
      </el-form-item>
      <el-form-item label="专业" prop="majorID">
        <el-select v-model="form.majorID" @change="getClassInfo" placeholder="请选择专业" class="max-width">
          <el-option
            v-for="item in major"
            :label="item.majorName"
            :value="item.majorID">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-date-picker
          v-model="form.grade"
          align="right"
          type="year"
          class="max-width"
          placeholder="请选择年级"
          @change="getGrade">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="学年" prop="academicYear">
        <el-date-picker
          v-model="form.academicYear"
          align="right"
          type="year"
          class="max-width"
          placeholder="请选择学年"
          @change="getAcademicYear">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="学期" prop="term">
        <el-select v-model="form.term" placeholder="请输入学期" class="max-width">
          <el-option label="01" value="01"></el-option>
          <el-option label="02" value="02"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-input v-model="form.startTime" placeholder="请输入开始时间"></el-input>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-input v-model="form.endTime" placeholder="请输入结束时间"></el-input>
      </el-form-item>
      <el-form-item label="负责老师" prop="teacherID">
        <el-select
        	v-model="teacherID"
        	filterable
        	multiple
        	class="max-width"
        	placeholder="请输入老师名称"
        	@change="getTeacherID">
			    <el-option
			      v-for="item in teacherInfo"
			      :key="item.teacherID"
			      :label="item.teacherName"
			      :value="item.teacherID">
			    </el-option>
  				</el-select>
      </el-form-item>
      <el-form-item label="所带班级" prop="classID">
        <el-select v-model="form.classID" @change="setClassInfo" placeholder="请选择班级名称" class="max-width">
          <el-option
            v-for="item in classInfo"
            :label="item.className"
            :value="item.classID">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课设安排">
        <el-upload
          ref="upload1"
          :action="CAIUrl"
          name="courseArrangeInfoName"
          :auto-upload="false"
          :on-success="setCAI"
          :file-list="CAIList">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="课设内容">
        <el-upload
          ref="upload2"
          :action="CDIUrl"
          name="courseDesignInfoName"
          :auto-upload="false"
          :on-success="setCDI"
          :file-list="CDIList">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="6" v-model="form.remark1"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'updateCourseDesign',
    data () {
      return {
        form: {
          trainingCourseID: '',
          courseDesignName:'',
          majorID: '',
          grade: '',
          academicYear: '',
          term: '',
          courseID: '',
          startTime: '',
          endTime: '',
          teacherID: '',
          classID: '',
          remark1: ''
        },

        rules: {
          courseDesignName: [
            {required: true, message: '请先输入课设名称', trigger: 'blur'}
          ],
          trainingCourseID: [
            {required: true, message: '请先选择课程', trigger: 'blur'}
          ],
          majorID: [
            {required: true, message: '请先选择专业', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '请先选择年级', trigger: 'blur'}
          ],
          academicYear: [
            {required: true, message: '请先选择学年', trigger: 'blur'}
          ],
          term: [
            {required: true, message: '请先选择学期', trigger: 'blur'}
          ],
          startTime: [
            {required: true, message: '请先选择开始时间', trigger: 'blur'}
          ],
          endTime: [
            {required: true, message: '请先选择结束时间称', trigger: 'blur'}
          ],
          teacherID: [
            {required: true, message: '请先选择老师', trigger: 'blur'}
          ],
          classID: [
            {required: true, message: '请先选择班级', trigger: 'blur'}
          ]
        },

        teacherID:"",
        courseInfo: [],
        major: [],
        teacherInfo: [],
        classInfo: [],
        selectedcourseInfo: [],
        selectedteacherInfo: []
      }
    },
    mounted() {
      this.res();
      this.getCourseInfo();
      this.getMajor();
      this.getTeacherInfo();
    },
    methods: {
      init(){
        this.setGrade();
        this.setSelectedcourseInfo();
        this.setSelectedteacherInfo();
      },
      res(){
        var courseDesignID = this.$route.query.courseDesignID;
        this.$http.post(`${this.$until.url}/courseDesign/getOneDesignInfo`, {
          courseDesignID: courseDesignID
        }, {emulateJSON: true}).then((res) => {
          // 响应成功回调
          //console.log(res)
          this.form = res.body;
          this.teacherID=res.body.teacherID;
          //this.form. = res.body[0];
          this.init()
          //console.log(typeof(this.form.grade))
        }, (err) => {
          // 响应错误回调
          console.log("服务器异常！");
        })
      },
      getCourseInfo(){
        this.$http.get(`${this.$until.url}/courseDesign/getAllCourseWithMajor`).then((res) => {
          // 响应成功回调
          this.courseInfo = res.body

        }, (err) => {
          // 响应错误回调
          console.log("服务器异常！");
        })
      },
      getMajor(){
        this.$http.get(`${this.$until.url}/courseDesign/getMajorDesign`)
          .then((res) => {
            //console.log(res)
            this.major = res.body
          }, (err) => {
            // 响应错误回调
            //console.log(err)
          })
      },
      getTeacherInfo(){
        this.$http.get(`${this.$until.url}/courseDesign/getTeacherDesign`).then((res) => {
          // 响应成功回调
          this.teacherInfo = res.body

        }, (err) => {
          // 响应错误回调
          console.log("服务器异常！");
        })
      },
      getGrade(val){
        this.form.grade = val
      },
      getAcademicYear(val){
        this.form.academicYear = val
      },
      getClassInfo(val){
        this.$http.post(`${this.$until.url}/courseDesign/getClassDesign`, {majorID: val}, {emulateJSON: true})
          .then((res) => {
            console.log(res)
            this.classInfo = res.body
          }, (err) => {
            // 响应错误回调
            //console.log(err)
          })
      },

      onSubmit(formName){
			this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateCourseDesign();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
		},

      updateCourseDesign() {
        this.$http.post(`${this.$until.url}/courseDesign/updateDesignInfo`, this.form, {emulateJSON: true}).then((res) => {
          // 响应成功回调
          //console.log("success");
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
          this.$router.push({path:'/CheckCourseDesign'})
        }, (err) => {
          // 响应错误回调
          console.log("服务器异常！");
        });
      },
      submitUpload1() {
        this.$refs.upload1.submit();
      },
      submitUpload2() {
        this.$refs.upload2.submit();
      },
      setCAI(response, file, fileList){
        for (var key in response) {
          this.form[key] = response[key]
        }
        //console.log(response)
      },
      setCDI(response, file, fileList){
        for (var key in response) {
          this.form[key] = response[key]
        }
      },
      setClassInfo(val){
        this.form.classID = val
      },
      setGrade(){
        //var grade = new Date(this.form.grade.toString());
        this.form.grade = this.form.grade.toString()
      },
      setSelectedcourseInfo(){
        var msg = [];
        msg.push(this.form.majorID);
        msg.push(this.form.trainingCourseID);
        this.selectedcourseInfo = msg
      },
      setSelectedteacherInfo(){
        var msg = [];
        msg.push(this.form.majorID);
        msg.push(this.form.teacherID);
        this.selectedteacherInfo = msg
      },
      courseInfoChange(value){
        this.form.trainingCourseID = value[1]
      },
//    teacherInfoChange(value){
//      this.form.teacherID = value[1]
//    }
      getTeacherID(value){
			//console.log(value)
			var msg="";
			for(const key of value){
				msg+=key+","
			}
			msg = msg.substring(0,msg.length-1);
			//console.log(msg);
			this.form.teacherID=msg
		}
    },
    computed: {
      CAIList: function () {
        var msg = [];
        var list = {
          name: this.form.courseArrangeInfoName,
          url: this.form.courseArrangeInfo
        }
        msg.push(list)
        return msg
      },
      CDIList: function () {
        var msg = [];
        var list = {
          name: this.form.courseDesignInfoName,
          url: this.form.courseDesignInfo
        }
        msg.push(list)
        return msg
      },
      CAIUrl: function () {
        return `${this.$until.url}/courseDesign/uploadCourseArrangeInfo`
      },
      CDIUrl: function () {
        return `${this.$until.url}/courseDesign/uploadCourseDesignInfo`
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
